<template>
	<view>
   <!-- <Navbar title="数据展示" bgColor="#fff" :hideBtn="true" :h5Show="false"></Navbar>
		<view class="index-block">
	  <view class="index-block-title">运行统计</view>
	  <u-row gutter="12">
	    <u-col span="3">
	      <view class="item-tj item-tj-frist">
	        <view style="padding: 16rpx; height: 100%; position: relative;">
	          <view style="display: flex; color: white;">
	            <u-icon name="photo" color="#fff"></u-icon>
	            <text>乡村数</text>
	          </view>
	          <view style="position: absolute; bottom: 48rpx; right: 16rpx;">
	            <u-count-to :startVal="0" :endVal="onlinePeople" :duration="1500" color="#fff" separator=","></u-count-to>
	          </view>
	        </view>
	      </view>
	    </u-col>
	    <u-col span="3">
	      <view class="item-tj item-tj-second">
	        <view style="padding: 16rpx; height: 100%; position: relative;">
	          <view style="display: flex; color: white;">
	            <u-icon name="photo" color="#fff"></u-icon>
	            <text>访客数</text>
	          </view>
	          <view style="position: absolute; bottom: 48rpx; right: 16rpx;">
	            <u-count-to :startVal="1" :endVal="1500" :duration="1500" color="#fff" separator=","></u-count-to>
	          </view>
	        </view>
	      </view>
	    </u-col>
	    <u-col span="3">
	      <view class="item-tj item-tj-thrid">
	        <view style="padding: 16rpx; height: 100%; position: relative;">
	          <view style="display: flex; color: white;">
	            <u-icon name="photo" color="#fff"></u-icon>
	            <text>认证村民</text>
	          </view>
	          <view style="position: absolute; bottom: 48rpx; right: 16rpx;">
	            <u-count-to :startVal="1" :endVal="peopleNumber" :duration="1500" color="#fff" separator=","></u-count-to>
	          </view>
	        </view>
	      </view>
	    </u-col>
		<u-col span="3">
		  <view class="item-tj item-tj-fourth">
		    <view style="padding: 16rpx; height: 100%; position: relative;">
		      <view style="display: flex; color: white;">
		        <u-icon name="photo" color="#fff"></u-icon>
		        <text>商城交易额</text>
		      </view>
		      <view style="position: absolute; bottom: 48rpx; right: 16rpx;">
		        <u-count-to :startVal="1" :endVal="1249350" :duration="1500" color="#fff" separator=","></u-count-to>
		      </view>
		    </view>
		  </view>
		</u-col> 
	  </u-row>
	</view> -->
	<view class="index-block">
<!-- 	  <view class="index-block-title">村落注册人数统计</view>
	  <view>
	    <qiun-data-charts type="line" canvasId="finance_a" :canvas2d="isCanvas2d" :resshow="delayload"
						:opts="{xAxis:{itemCount:12,disableGrid:true},yAxis:{disableGrid:true,data:[{disabled:true}]}}"
						:chartData="historyData" />
	  </view> -->
	  <view class="index-block-title">村落注册人数统计</view>
	  <view>
	    <qiun-data-charts type="bar" canvasId="finance_b" :canvas2d="isCanvas2d" :resshow="delayload"
						:opts="{xAxis:{disabled: true,disableGrid:true},extra:{bar:{barBorderCircle:true,width:20}},legend:{show:false}}"
						:chartData="historyData1" />
	  </view>
	</view>
	


	</view>
</template>

<script>
import Navbar from '@/components/navbar/Navbar'
import Gap from '@/components/gap/Gap'
import * as NoticeApi from '@/api/work/notice'
export default {
  components: {
    Gap,
    Navbar,
  },
  
  data () {
    return {
      activeKey: 'work',
      tabs: [{
        name: '日常工作',
        key: 'work'
      }, {
        name: '插件',
        key: 'plugin'
      }],
      todo: {
        notice: 2,
        task: 5,
        error: 1
      },
	  isCanvas2d: true,
	  delayload: false,
	  searchValue: 0,
	  onlinePeople: 1000,
	  peopleNumber: 0,
	  
	  msgList: [
	        { url: "url", title: "恭喜xxx完成任务退回200进入领奖区" },
	        { url: "url", title: "恭喜xxx获得XXX奖励" },
	        { url: "url", title: "恭喜xxx完成任务退回300进入领奖区" }],
	  historyData: {
	    "categories": [
	      "6月",
	      "7月",
	      "8月",
	      "9月",
	      "10月"
	    ],
	    "series": [
	      {
	        "name": "",
	        "data": [1601,1840,1900,1760,1500],
	        "type": "line",
	        "style": "curve",
	        "color": "#4ECDB6",
	        "unit":""
	      }
	    ],
	    "yAxis":[
	      {"calibration":true,"position":"left","title":"单位/元","titleFontSize":12,"unit":"","tofix":0,"min":0,"disableGrid":true}
	    ]
    },
	historyData1: {
	    "categories": ["龙湖村","幸福村"],
	    "series": [
	      {
	        "name": "",
	        "data": [1,2],
	        "type": "line",
	        "style": "curve",
	        "color": "#4ECDB6",
	        "unit":""
	      }
	    ],
	    "yAxis":[
	      {"calibration":true,"position":"left","title":"单位/元","titleFontSize":12,"unit":"","tofix":0,"min":0,"disableGrid":true}
	    ]
	}
  }},
  created() {
  	this.getNumber(),
	this.selectTableData()
	
  },
  methods: {
    tabChange (item) {
      this.activeKey = item.key;
    },
    navigateTo (url) {
      uni.navigateTo({ url: url })
    },
	getNumber(){
		NoticeApi.getUserNumbers().then(res => {
		  this.peopleNumber = res.number;
		})
	},
	getOnlineNumber(){
	NoticeApi.getOnlinePeopleNumber().then(res => {
	  this.onlinePeople = res.total;
	})	
	},
	selectTableData(){	NoticeApi.selectTableData().then(res => {	  this.historyData1.categories=res.addressList;	  this.historyData1.series[0].data=res.numList;	  console.log(this.historyData)	})		}
  }
}
</script>

<style lang="scss">
.adsec{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin: 10rpx auto;
  background:rgba(254,242,242,1);
  border-radius:6px;
  padding: 7rpx 10rpx;
  height: 50rpx;
}
.adsec icon{
  display: flex;
  margin-right: 10rpx;
}
.swiper_container {
  height: 55rpx;
  width: 80%;
  line-height: 55rpx;
  padding-left: 10rpx;
}

.swiper_item {
  font-size: 25rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 2px;
}	
.index-content {
  background-color: #f3f4f6;
  min-height: 100vh;
}
.index-block {
  padding: 40rpx;
  background-color: #fff;
}
.index-block-title {
  font-size: 40rpx;
  font-weight: bold;
  padding: 0 0 40rpx 0;
}
.item-tj {
  width: 100%;
  height: 160rpx;
  border-radius: 16rpx;
  
  &-frist {
    background-color: rgba($color: #2979ff, $alpha: 0.8);
    // background-image: url('/static/img/bg/qb.png');
  }

  &-second {
    background-color: rgba($color: #303133, $alpha: 0.8);
    // background-image: url('/static/img/bg/qb.png');
  }

  &-thrid {
    background-color: rgba($color: #19be6b, $alpha: 0.8);
    // background-image: url('/static/img/bg/qb.png');
  }
  &-fourth {
    background-color: rgba($color: #E45521, $alpha: 0.8);
    // background-image: url('/static/img/bg/qb.png');
  }
}
.detail_list{
  height: 700rpx;
  overflow: auto;
  color: #9E9E9E;
  .detail_item{
    display: flex;
    margin: 20rpx 0;
    align-items: center;
    .icon{
      width: 30%;
      text-align: center;
      li{
        font-size: 80rpx;
      }
    }
    .right_content{
      width: 50%;
      text-align: center;
    }
    .icon-income{
      color:#4AABF9;
    }
    .icon-expend{
      color: #E45521;
    }
    .money{
      color: #000;
    }
  }
}
</style>